<template>
  <view class="login-container">
    <view class="logo">
      <image src="/static/logo.png" mode="aspectFit"></image>
    </view>
    <view class="login-form">
      <view class="form-item">
        <image src="/static/img/user.png" class="icon" mode="aspectFit"></image>
        <input type="text" v-model="username" placeholder="请输入用户名" placeholder-class="placeholder-style"/>
      </view>
      <view class="form-item">
        <image src="/static/img/password.png" class="icon" mode="aspectFit"></image>
        <input type="password" v-model="password" placeholder="请输入密码" placeholder-class="placeholder-style"/>
      </view>
      <button class="login-btn" @click="handleLogin" :disabled="loading || !username || !password">
        {{ loading ? '登录中...' : '登录' }}
      </button>
      <view class="link-group">
        <text @click="goToRegister">注册账号</text>
        <text @click="forgotPassword">忘记密码</text>
      </view>
    </view>
  </view>
</template>

<script>
import api from '../../utils/api.js';
import {setToken} from '../../utils/auth.js';

export default {
  data() {
    return {
      username: '',
      password: '',
      loading: false
    };
  },
  methods: {
    async handleLogin() {
      // 简单的表单验证
      if (!this.username.trim()) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        });
        return;
      }

      if (!this.password.trim()) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        });
        return;
      }

      this.loading = true;
      try {
        // 调用登录接口
        const res = await api.userLogin({
          username: this.username,
          password: this.password
        });

        // 登录成功后保存token
        // 修改handleLogin方法中的跳转部分
        // if (res.code === 200 && res.data && res.data.token) {
        if (res.code === 200 ) {
          console.log('登录成功，准备跳转到首页');

          // setToken(res.data.token);

          // 可以在这里获取用户信息并保存
          if (res.data) {
            uni.setStorageSync('userInfo', res.data);
          }

          // 显示登录成功提示
          uni.showToast({
            title: '登录成功',
            icon: 'success',
            duration: 1500
          });

          // 非常重要：将跳转逻辑移出success回调，直接在这里执行
          // 添加日志以便调试
          console.log('登录成功，准备跳转到首页');
          console.log('登录成功，准备跳转到首页');

          // 稍微延迟一下，让用户能看到成功提示
          setTimeout(() => {
            console.log('执行跳转操作');
            uni.reLaunch({
              url: '/pages/tabbar/tabbar-1/tabbar-1',
              success: () => {
                console.log('跳转成功');
              },
              fail: (err) => {
                console.error('跳转失败，错误信息:', err);
                // 最后的兜底方案，再次尝试跳转
                setTimeout(() => {
                  console.log('尝试再次跳转');
                  window.location.href = '/pages/tabbar/tabbar-1/tabbar-1';
                }, 500);
              }
            });
          }, 1500);
        } else {
          // 处理登录失败的情况
          uni.showToast({
            title: res.msg || '登录失败，请重试',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('登录失败', error);
        // 错误处理已经在request.js的响应拦截器中处理了
      } finally {
        this.loading = false;
      }
    },

    // 跳转到注册页面（如果需要）
    goToRegister() {
      uni.navigateTo({
        url: '/pages/register/register' // 假设注册页面路径
      });
    },

    // 忘记密码功能
    forgotPassword() {
      uni.showToast({
        title: '忘记密码功能开发中',
        icon: 'none'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80upx 40upx;
  background-color: #f8f8f8;
  min-height: 100vh;
  box-sizing: border-box;
}

.logo {
  width: 200upx;
  height: 200upx;
  margin-bottom: 80upx;

  image {
    width: 100%;
    height: 100%;
  }
}

.login-form {
  width: 100%;
  background-color: #fff;
  border-radius: 20upx;
  padding: 40upx;
  box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.form-item {
  display: flex;
  align-items: center;
  border-bottom: 1upx solid #f0f0f0;
  padding: 20upx 0;
  margin-bottom: 20upx;
}

.icon {
  width: 40upx;
  height: 40upx;
  margin-right: 20upx;
}

input {
  flex: 1;
  height: 60upx;
  font-size: 28upx;
  color: #333;
}

.placeholder-style {
  color: #999;
}

.login-btn {
  width: 100%;
  height: 90upx;
  background-color: #007aff;
  color: #fff;
  border-radius: 45upx;
  font-size: 32upx;
  margin-top: 40upx;
  margin-bottom: 30upx;
}

.login-btn[disabled] {
  background-color: #cccccc;
}

.link-group {
  display: flex;
  justify-content: space-between;
  padding: 0 20upx;
}

.link-group text {
  color: #007aff;
  font-size: 28upx;
}
</style>